.packageIWishingPool {
  width: 100%;
  height: 100vh;
  background: #ffffff;

  .wishPoolBox {
    padding: 46px 32px 55px;
    box-shadow: 12px 13px 13px #f4f2f2;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
  }

  .topFirst {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 36px;

    .title {
      color: #333333;
      font-size: 28px;
    }

    .emptyText {
      color: #666666;
      font-size: 24px;
    }
  }

  .wishPoolHotBox {
    padding: 46px 32px 55px;
  }

  .wishBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;

    .wishBox-hot-item {
      width: 212px !important;
      height: 212px !important;
    }

    &-item {
      width: 326px;
      height: 324px;
      margin-bottom: 32px;
      position: relative;

      &-img {
        width: 100%;
        height: 100%;
        border-radius: 20px;
      }

      .removedBox {
        background: rgba(82, 82, 82, 0.8);
      }

      &-con {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 20px;
        background: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;

        &-name {
          width: 80%;
          font-size: 28px;
          color: #ffffff;
          position: absolute;
          top: 26px;
          right: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: block;
          text-align: right;
        }

        .removedIcon {
          height: 154px;
        }

        &-getBox {
          display: flex;
          flex-direction: row;
          align-items: center;
          position: absolute;
          bottom: 12px;
          right: 20px;

          text {
            color: #ffffff;
            font-size: 24px;
          }

          .rightIcon {
            width: 48px;
          }
        }
      }
    }
  }

  .notdataBox {
    .notdataCon {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 12px 13px 13px #f4f2f2;
      border-bottom-left-radius: 60px;
      border-bottom-right-radius: 60px;

      .notdatabg {
        width: 604px;
      }

      .notdataText {
        color: #999999;
        font-size: 20px;
        margin-bottom: 20px;
        text-align: center;
      }

      .notdataLabel {
        color: #666666;
        font-size: 24px;
        text-align: center;
        margin-bottom: 20px;
      }
    }
  }
}
